<script setup lang="ts">
import { ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
const props = defineProps({
  dataArr: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ""
  }
});
var colorList = [
  "#73DDFF",
  "#73ACFF",
  "#FDD56A",
  "#FDB36A",
  "#FD866A",
  "#9E87FF",
  "#58D5FF"
];
let total = props.dataArr.reduce((a, b) => {
  return a + b.value * 1;
}, 0);
// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });

// 根据配置项渲染ECharts
setOptions({
  title: {
    text: "{name|" + props.title + "}\n{val|" + total + "}",
    x: "center",
    y: "center",
    textStyle: {
      fontSize: 20,
      rich: {
        name: {
          fontSize: 14,
          fontWeight: "normal",
          color: "#666666",
          padding: [10, 0]
        },
        val: {
          fontSize: 32,
          fontWeight: "bold",
          color: "#333333"
        }
      }
    }
  },
  tooltip: {
    trigger: "item"
  },
  series: [
    {
      type: "pie",
      center: ["50%", "50%"],
      radius: ["40%", "70%"],
      clockwise: true,
      avoidLabelOverlap: true,
      label: {
        show: true,
        position: "outside",
        formatter: "{d}%"
      },
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[Math.floor(Math.random() * 7)];
          }
        }
      },
      data: props.dataArr || []
    }
  ]
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 300px" />
</template>
